<template>
  <div id="Frosted"></div>
  <img
    id="image"
    :src="`http://tp.linqiaoyan.top/${dataList[showBox].headImg}`"
    alt=""
  />
  <main>
    <div class="left" @click="reduceShowBox"></div>
    <div class="textBox">
      <img
        :src="`http://tp.linqiaoyan.top/${dataList[showBox].headImg}`"
        alt=""
      />
      <div class="infoSingeText">
        <h2>{{ dataList[showBox].title }}</h2>
        <p>{{ dataList[showBox].addTime }}</p>
        <div>{{ dataList[showBox].summary }}</div>
      </div>
      <div class="operate">
        <span
          class="iconfont icon-modify"
          @click="updateDataList(dataList[showBox].id)"
        ></span>
        <span
          class="iconfont icon-shanchu"
          @click="deleteBtn(dataList[showBox].id)"
        ></span>
      </div>
    </div>
    <div class="right" @click="addShowBox"></div>
  </main>
  <footer>
    <div class="EssayBox" v-for="(item, index) in dataList" :key="index">
      <div class="contentBox">
        <img :src="`http://tp.linqiaoyan.top/${item.headImg}`" alt="" />
        <div class="textInfoBox">
          <h2>{{ item.title }}</h2>
          <div class="textListInfo">
            <div>
              <p>{{ item.addTime }}</p>
              {{ item.summary }}
            </div>
            <div class="operates">
              <span
                class="iconfont icon-modify"
                @click="updateDataList(item.id)"
              ></span>
              <span
                class="iconfont icon-shanchu"
                @click="deleteBtn(item.id)"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

  <el-dialog
    v-model="dialogVisible"
    :modal="false"
    :close-on-click-modal="false"
    :show-close="false"
    title="温馨提示"
    width="30%"
  >
    <span>您确定要删除嘛？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteList">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import { selectEssay, deleteEssay, selectTextEssay } from "@/api/serverRequest";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "",
  props: ["searchText"],
  components: {},
  setup(props) {
    let showBox = ref(0);
    let img = ref("../assets/person.jpg");
    let showFlag = ref(false);
    let dataList = reactive([
      {
        id: "",
        title: "",
        headImg: "",
        table: "",
        textInfo: "",
        summary: "",
        addTime: "",
      },
    ]);
    let pagedataList = reactive([
      {
        id: "",
        title: "",
        headImg: "",
        table: "",
        textInfo: "",
        summary: "",
        addTime: "",
      },
    ]);
    let page = ref(1);
    let dialogVisible = ref(false);
    let deleteId = ref("0");
    let router = useRouter();

    selectEssay(page.value).then((response) => {
      pagedataList.push(...response.data.slice(3));
      pagedataList.shift();
      dataList.push(...response.data.slice(0, 3));
      dataList.shift();
    });

    onMounted(() => {
      window.scrollBy(0, 0);
      let scroll = window.scrollY;
      window.onscroll = () => {
        if (window.scrollY - scroll >= 200) {
          scroll = window.scrollY;
          let data = pagedataList.shift();
          if (data != undefined) {
            dataList.push(data);
          }
          if (pagedataList.length === 0) {
            page.value++;
            selectEssay(page.value).then((response) => {
              pagedataList.push(...response.data);
            });
          }
        }
      };

      if (props.searchText) {
        selectTextEssay(props.searchText).then((response) => {
          dataList.unshift(...response.data);
        });
      }
    });

    function addShowBox() {
      if (showBox.value < dataList.length - 1) {
        showBox.value++;
      }
    }

    function reduceShowBox() {
      if (showBox.value > 0) {
        showBox.value--;
      }
    }

    function deleteList() {
      dataList.forEach((val, index) => {
        if (val.id === deleteId.value) {
          dataList.splice(index, 1);
        }
      });
      deleteEssay(deleteId.value);
      dialogVisible.value = false;
    }

    function deleteBtn(id: string) {
      dialogVisible.value = true;
      deleteId.value = id;
    }

    function updateDataList(id: string) {
      router.push({
        name: "addessay",
        params: { id: id },
      });
    }

    return {
      img,
      showFlag,
      dataList,
      showBox,
      reduceShowBox,
      addShowBox,
      deleteList,
      dialogVisible,
      deleteBtn,
      updateDataList,
    };
  },
});
</script>

<style scoped lang="scss">
#image {
  width: 100vw;
  height: 50vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -4;
  filter: blur(10px);
}

#Frosted {
  width: 100vw;
  height: 50vh;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  z-index: -3;
}

main {
  width: 40rem;
  display: flex;
  justify-content: center;
  .textBox {
    cursor: pointer;
    background-color: white;
    margin: 0 20px;
    height: 30rem;
    width: 30rem;
    border: 1px solid #1a94bc;
    border-radius: 5px;
    transition: all 5s;
    position: relative;
    img {
      width: 100%;
      height: 15rem;
    }
    .infoSingeText {
      p {
        text-align: left;
        margin: 1rem;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .operate {
      position: absolute;
      width: 100%;
      text-align: right;
      bottom: 0;
      span {
        display: inline-block;
        font-size: 2rem;
        margin: 5px;
        &:hover {
          color: #42b983;
        }
      }
    }
  }
  .left {
    cursor: pointer;
    height: 3rem;
    width: 3rem;
    background-size: cover;
    background-image: url("../assets/左箭头.png");
  }

  .right {
    cursor: pointer;
    height: 3rem;
    width: 3rem;
    background-size: cover;
    background-image: url("../assets/右箭头.png");
  }
  margin: 5rem auto;
}

footer {
  .EssayBox {
    border-radius: 3px;
    position: relative;
    &:before {
      content: "";
      left: -2px;
      display: block;
      position: absolute;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.2);
      width: 795px;
      height: 240px;
      border: 5px solid white;
      border-radius: 3px;
    }
    cursor: pointer;
    width: 800px;
    box-shadow: 0 0 10px black;
    margin: 8rem auto;
    .contentBox {
      height: 250px;
      display: flex;
      justify-content: space-between;
      img {
        width: 42%;
        height: 100%;
      }
      .textInfoBox {
        position: relative;
        width: 100%;
        .textListInfo {
          p {
            text-align: left;
            font-size: 12px;
            font-weight: bold;
            margin: 10px 20px;
          }
        }

        .operates {
          position: absolute;
          right: 5px;
          bottom: 5px;
          z-index: 1;
          span {
            display: inline-block;
            font-size: 2rem;
            margin: 0.5rem;
            &:hover {
              color: #42b983;
            }
          }
        }
      }
    }
    animation: showTextBox 1.5s linear;
  }
}

@keyframes showTextBox {
  from {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes card {
  50% {
    top: 0;
  }
}
</style>
